<template>
    <div>
        <el-dialog :fullscreen="state.isFullScreen" v-model="state.isShowDialog"  center class="borderRadius10" :show-close="false" width="1280">
            <template #header>
				<div class="flex" style="justify-content: space-between;align-items: center;">
					<div class="" style="flex:1">&nbsp</div>
					<p class="font16" style="font-weight: bold; flex:3">{{state.title}}</p>
					<div class=" flex" style="justify-content: flex-end;align-items: center; flex:1">
						<el-icon @click="fullScreen" class="ml10" style="color:var(--el-color-info);cursor: pointer;">
							<SvgIcon v-if="!state.isFullScreen" class="font16" name="iconfont icon-fullscreen" />
							<SvgIcon v-else class="font16" name="iconfont icon-tuichuquanping" />
						</el-icon>
						<el-icon @click="closeDialog" class="ml10 font16" style="color:var(--el-color-info);cursor: pointer;"><ele-Close /></el-icon>
					</div>
				</div>
			</template>
            <section class="dialogBox">
                <el-form :model="state.param" :inline="true" class="inputWidths">
					<el-form-item label="展示方式：">
						<el-select v-model="state.param.showType" placeholder="请选择展示方式" @change="modeChange()">
							<el-option v-for="item in state.query.showTypeList" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="商品来源：">
						<el-select v-model="state.param.source" placeholder="请选择商品来源" @change="modeChange()">
							<el-option v-for="item in state.query.sourceList" :key="item.dictValue"
								:label="item.dictName" :value="item.dictValue" />
						</el-select>
					</el-form-item>
					<el-form-item label="商品品牌：">
						<el-select v-model="state.param.brand" placeholder="请选择商品品牌" @change="modeChange()">
							<el-option v-for="item in state.query.brandList" :key="item.brandId"
								:label="item.brandName" :value="item.brandId" />
						</el-select>
					</el-form-item>
					<el-form-item label="商品属性：" >
						<el-select v-model="state.param.type" placeholder="请选择商品类型" @change="modeChange()">
							<el-option v-for="item in state.query.typeList" :key="item.dictValue"
								:label="item.dictName" :value="item.dictValue" />
						</el-select>
					</el-form-item>

					<el-form-item label="销售渠道：">
						<el-select v-model="state.param.channel" placeholder="请选择门店状态" @change="modeChange()">
							<el-option v-for="item in state.query.saleChannelList" :key="item.dictValue"
								:label="item.dictName" :value="item.dictValue" />
						</el-select>
					</el-form-item>
					<el-form-item label="销售终端：" v-if="state.param.channel == 1 || state.param.channel == 2">
						<el-select v-if="state.param.channel == 1" v-model="state.param.terminal" 
							placeholder="请选择销售门店" @change="modeChange()">
							<el-option v-for="item in state.query.storeSaleTerminal" :key="item.id"
								:label="item.name" :value="item.id" />
						</el-select>
						<el-select v-if="state.param.channel == 2" v-model="state.param.terminal" 
							placeholder="请选择线上渠道" @change="modeChange()">
							<el-option v-for="item in state.query.shopSaleTerminal" :key="item.dictValue"
								:label="item.dictName" :value="item.dictValue" />
						</el-select>
					</el-form-item>
					<el-form-item label="商品分类：" v-if="state.param.channel == 1 || state.param.channel == 2">
						<el-cascader v-if="state.param.channel == 1" v-model="state.param.sort"
							placeholder="请选择门店商品分类" :options="state.query.storeSortList"
							:props="{ label: 'text', value: 'id', children: 'children' }" />
						<el-cascader v-if="state.param.channel == 2" v-model="state.param.sort"
							placeholder="请选择商城商品分类" :options="state.query.shopSortList"
							:props="{ label: 'text', value: 'id', children: 'children' }" />
					</el-form-item>
					<el-form-item label="商品搜索：" class="searchandBts">
						<el-input v-model="state.param.keyWords" placeholder="请输入关键字搜索" clearable></el-input>
                        <el-button type="primary" @click="search">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
                    </el-form-item>
					<!-- <el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
					</el-form-item> -->
				</el-form>
            </section>
            <section class="dialogBoxTables">
                <el-table lazy v-if="state.param.showType == 0" scrollbar-always-on v-loading="state.loading" :data="state.tableData" row-key="spuId" height="calc(100%)" style="width: 100%" ref="goodSpuTableRef">
                    <el-table-column type="expand" width="1">
                        <template #default="props">
                            <section v-if="props.row.isShowSkuList">
                                <expandSkuMsg ref="expandSkuMsgRef"  @refreshFun="getGoodsList" :skuTableData="props.row.skuList"></expandSkuMsg>
                            </section>
                            <section class="ml80 mr80" v-if="props.row.isShowSpuMsg">
                                <el-row>
                                    <el-col :span="5" class="mb10">
                                        <span>操作人：{{ props.row.updateBy }}</span>
                                    </el-col>
                                    <el-col :span="5" class="mb10">
                                        <span>创建人：{{ props.row.createdBy }}</span>
                                    </el-col>
                                    <el-col :span="5" class="mb10">
                                        <span>操作时间：{{ props.row.updateTime }}</span>
                                    </el-col>
                                    <el-col :span="5" class="mb10">
                                        <span>创建时间：{{ props.row.createdTime }}</span>
                                    </el-col>
                                </el-row>
                            </section>
                        </template>
                    </el-table-column>
                    <el-table-column label="" width="20" >
                        <template #default="scope">
                            <el-icon title="展开商品其他信息" @click="expandSpuMsg(scope.row)">
                                <ele-CaretRight v-if="!scope.row.isShowSpuMsg"/>
                                <ele-CaretBottom v-if="scope.row.isShowSpuMsg"  />
                            </el-icon>
                        </template>
                    </el-table-column>
                    <el-table-column type="selection" width="30" />
                    <el-table-column label="SPU" width="90" >
                        <template #default="scope">
                            <span>{{ scope.row.spuId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="图片" min-width="90">
                        <template #default="scope">
                            <div style="display: flex;justify-content:flex-start;align-items: center;">
                                <el-icon title="展开商品Sku"  @click="expandSkuList(scope.row)">
                                    <ele-Plus v-if="!scope.row.isShowSkuList"/>
                                    <ele-Minus v-if="scope.row.isShowSkuList"/>
                                </el-icon>
                                <el-image class="borderRadius5 ml5 mr20" style="width:32px; height: 32px;" :src="scope.row.imgUrl"
                                    fit="cover" />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="品牌" class-name="textLeft" show-overflow-tooltip min-width="130">
                        <template #default="scope">
                            <span class="text">{{ scope.row.brandIdName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" min-width="200" show-overflow-tooltip class-name="textLeft">
                        <template #default="scope">
                            <span class="text">{{ scope.row.spuName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="零售价" min-width="120">
                        <template #default="scope">
                            <span style="display: flex;align-items: center;"> ￥{{ scope.row.priceRange }}&nbsp;
                                <el-icon class="iconfont-warp-value"> <ele-Edit /> </el-icon> 
                            </span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column label="销售渠道" width="110">
                        <template #default="scope">
                            <span>{{ scope.row.salesChannelName }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="来源" width="100">
                        <template #default="scope">
                            <span>{{ scope.row.sourceName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="排序" width="100">
                        <template #default="scope">
                            <el-popover :width="160" trigger="click">
                                <template #reference>
                                    <span style="display: flex;align-items: center;"> {{ scope.row.sortNumber }}&nbsp;
                                        <el-icon class="iconfont-warp-value"> <ele-Edit /> </el-icon> 
                                    </span>
                                </template>
                                <section class="flex">
                                    <el-input v-model="scope.row.spuI" class="font14 mr10" style="height: 30px;line-height: 30px;" placeholder="排序">
                                        <template #append>
                                            <el-button type="primary" class="font14" style="height: 30px;line-height: 30px;">
                                                确 认
                                            </el-button>
                                        </template>
                                    </el-input>
                                </section>
                            </el-popover>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="状态" width="100">
                        <template #default="scope">
                            <el-switch @click="changeStatusFun('spu',scope.row)" v-model="scope.row.onSelf" disabled :active-value=1 :inactive-value=0 />
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="操作" width="120">
                        <template #default="scope">
                            <span class="pointer font16" style="color:var(--el-color-primary);"> 详情 </span>
                            <span style="color:var(--el-color-primary);">&nbsp;|&nbsp;</span>
                            <el-dropdown>
                                <span style="color:var(--el-color-primary);" class="pointer font16"> 操作 </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="addCommodity('edit',scope.row.spuId)">编辑</el-dropdown-item>
                                        <el-dropdown-item>会员价</el-dropdown-item>
                                        <el-dropdown-item>关联门店</el-dropdown-item>
                                        <el-dropdown-item>物流设置</el-dropdown-item>
                                        <el-dropdown-item>购买送积分</el-dropdown-item>
                                        <el-dropdown-item>购买送优惠券</el-dropdown-item>
                                        <el-dropdown-item>关联商品标签</el-dropdown-item>
                                        <el-dropdown-item>活动推荐</el-dropdown-item>
                                        <el-dropdown-item @click="delFun('spu',scope.row.spuId)">删除</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </template>
                    </el-table-column> -->
                    <template #empty>
                        <el-empty description="暂无数据" />
                    </template>
                </el-table>
                <el-table v-if="state.param.showType == 1" scrollbar-always-on v-loading="state.loading" :data="state.tableData" row-key="skuId" height="calc(100%)" style="width: 100%" ref="goodSkuTableRef"
                    :header-cell-style="{ textAlign: 'center'}">
                    <el-table-column type="expand" width="1">
                        <template #default="props">
                            <section class="ml80 mr80" v-if="props.row.isShowSkuMsg">
                                <el-row>
                                    <el-col :span="5" class="mb10">
                                        <span>操作人：{{ props.row.updateBy }}</span>
                                    </el-col>
                                    <el-col :span="5" class="mb10">
                                        <span>创建人：{{ props.row.createdBy }}</span>
                                    </el-col>
                                    <el-col :span="5" class="mb10">
                                        <span>操作时间：{{ props.row.updateTime }}</span>
                                    </el-col>
                                    <el-col :span="5" class="mb10">
                                        <span>创建时间：{{ props.row.createdTime }}</span>
                                    </el-col>
                                </el-row>
                            </section>
                        </template>
                    </el-table-column>
                    <el-table-column label="" width="20" >
                        <template #default="scope">
                            <el-icon title="展开商品其它信息"  @click="expandSkuMsgFun(scope.row)">
                                <ele-CaretRight v-if="!scope.row.isShowSkuMsg"/>
                                <ele-CaretBottom v-else-if="scope.row.isShowSkuMsg"  />
                            </el-icon>
                        </template>
                    </el-table-column>
                    <el-table-column type="selection" width="30" />
                    <el-table-column label="SKU" width="90"  >
                        <template #default="scope">
                            <span>{{ scope.row.skuId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="图片" width="90">
                        <template #default="scope">
                            <div style="display: flex;justify-content:center;align-items: center;">
                                <el-image style="width:32px;height: 32px;" :src="scope.row.imgUrl" fit="cover" />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="品牌" class-name="textLeft" show-overflow-tooltip min-width="130">
                        <template #default="scope">
                            <span class="text"> {{ scope.row.brandIdName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" min-width="200" show-overflow-tooltip class-name="textLeft">
                        <template #default="scope">
                            <span class="text"> {{ scope.row.spuName }} {{ scope.row.skuList[0].skuSerialName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="属性" min-width="90">
                        <template #default="scope">
                            <span>{{ scope.row.skuList[0].skuTypeName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格" min-width="90">
                        <template #default="scope">
                            <span>{{ scope.row.skuList[0].skuSerialName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="零售价" min-width="100">
                        <template #default="scope">
                            <span>{{ scope.row.skuList[0].retailPrice }}元</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="来源" min-width="90">
                        <template #default="scope">
                            <span>{{ scope.row.sourceName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="销售渠道" min-width="110">
                        <template #default="scope">
                            <span>{{ scope.row.salesChannelName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" min-width="100">
                        <template #default="scope">
                            <el-switch @click="changeStatusFun('sku',scope.row)" v-model="scope.row.onSelf" disabled :active-value=1 :inactive-value=0 />
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="操作" width="120">
                        <template #default="scope">
                            <span class="pointer font16" style="color:var(--el-color-primary);" > 详情 </span>
                            <span style="color:var(--el-color-primary);">&nbsp;|&nbsp;</span>
                            <el-dropdown>
                                <span style="color:var(--el-color-primary);" class="pointer font16"> 操作 </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="addCommodity('edit',scope.row.spuId)">编辑</el-dropdown-item>
                                        <el-dropdown-item>会员价</el-dropdown-item>
                                        <el-dropdown-item>关联门店</el-dropdown-item>
                                        <el-dropdown-item>物流设置</el-dropdown-item>
                                        <el-dropdown-item>购买送积分</el-dropdown-item>
                                        <el-dropdown-item>购买送优惠券</el-dropdown-item>
                                        <el-dropdown-item>关联商品标签</el-dropdown-item>
                                        <el-dropdown-item>活动推荐</el-dropdown-item>
                                        <el-dropdown-item @click="delFun('sku',scope.row.skuId)">删除</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </template>
                    </el-table-column> -->
                    <template #empty>
                        <el-empty description="暂无数据" />
                    </template>
                </el-table>
            </section>
            <section>
                <el-row justify="end">
                    <el-col :span="24" class="flex-end-center">
                        <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                            :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
                            v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
                            :total="state.total">
                        </el-pagination>
                    </el-col>
                </el-row>
            </section>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog">取 消</el-button>
					<el-button type="primary" @click="onSubmit">确 认</el-button>
				</span>
			</template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts" name="goodsIntoShow">
import { ref, reactive, onMounted } from 'vue';
import { productList, productChangeOnSelf, spuDelete, skuDelete ,brandList,productCategoryList, } from '/@/api/commodity';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { configData } from "/@/api/common";
const goodSpuTableRef = ref();
const goodSkuTableRef = ref();
const router = useRouter();
const state = reactive({
    isFullScreen:false,
    isShowDialog:true,
    title:'',
    loading:false,
    tableData:[],
    onSalesNum: 0,
	onStockNum: 0,
	outSellNum: 0,
	outRecycleNum: 0,
	total: 0,
    param: {
		showType: 0, // 商品展示方式 
		source: -1, // 商品来源
		brand: -1, // 商品品牌
		type: -1, // 商品属性
		channel: -1, // 商品销售渠道
		sort: -1, // 商品分类
		terminal: null, // 销售终端
		keyWords:'', // 搜索关键字
		pageNum: 1,
		pageSize: 10,
        dateTime:'',
        startTime:'',
        endTime:''
	},
    query: {
		// 展示方式
		showTypeList: [
			{ value: 0, label: 'SPU列表' },
			{ value: 1, label: 'SKU列表' }
		],
		// 商品来源
		sourceList: [] as Array<any>,
		// 商品品牌
		brandList: [] as Array<any>,
		// 商品属性
		typeList: [] as Array<any>,
		// 销售渠道
		saleChannelList: [] as Array<any>,
		// 商品分类列表
		shopSortList: [] as Array<any>,
		storeSortList: [] as Array<any>,
		// 销售终端列表(根据渠道区分，线上渠道取线上终端，门店渠道取门店终端)
		shopSaleTerminal: [] as Array<any>,
		storeSaleTerminal: [] as Array<any>,
	},
})
//打开弹窗
const openDialog = () => {
    state.isShowDialog = true;
}
//关闭弹窗
const closeDialog = () => {
    state.isShowDialog = false;
}
//全屏切换
const fullScreen = () => {
    state.isFullScreen = !state.isFullScreen;
}
// 弹窗的确认按钮
const onSubmit = () => {

}
//搜索条件所需的数据
const getConfigDataFun = async () =>{
	let params = {
		dictType: ''// 数组传空默认全部
	}
	const { results } = await configData(params);
	state.query.sourceList = results.source; // 商品来源;
	state.query.sourceList.unshift({dictName:'全部',dictValue:-1})
	state.query.typeList = results.spuType1; // 商品属性
	state.query.typeList.unshift({dictName:'全部',dictValue:-1})
	state.query.saleChannelList = results.salesChannel; // 销售渠道；
	state.query.saleChannelList.unshift({dictName:'全部',dictValue:-1})
	state.query.shopSaleTerminal = results.salesOnlineChannel; // 线上销售渠道
	state.query.shopSaleTerminal.unshift({dictName:'全部',dictValue:-1})
}
// 品牌列表获取
const getBrandList = async () => {
	const { results } = await brandList({ mode: null });
	state.query.brandList = results.records;
	state.query.brandList.unshift({brandName:'全部',brandId:-1})
}
// 获取商品列表
const getGoodsList = async () => {
	state.loading = true;//不用传参， 请求得入参在上面都定义了 param这里吗？
	let params = {
		spuType: 1, // 普通商品
		showType: state.param.showType,
		pageNum: state.param.pageNum,
		pageSize: state.param.pageSize,
        // source: state.param.source, // 商品来源
		// brand: state.param.keyWords, // 商品品牌
		// type: state.param.keyWords, // 商品属性
		// channel: state.param.keyWords, // 商品销售渠道
		// keyWords:state.param.keyWords, // 搜索关键字
	}
	state.tableData = [];
	if(state.param.showType == 0){
		const { results,onSalesNum,onStockNum,outSellNum,outRecycleNum } = await productList(params);
		state.tableData = results.records.map((obj: any) => ({  
			...obj,  
			isExpand:false,
			isShowSpuMsg:false, 
			isShowSkuList:false,  
		}));
		state.loading = false;
		state.total = results.total;
		state.onSalesNum = onSalesNum;
		state.onStockNum = onStockNum;
		state.outSellNum = outSellNum;
		state.outRecycleNum = outRecycleNum;
	}else if(state.param.showType == 1){
		const { results,onSalesNum,onStockNum,outSellNum,outRecycleNum } = await productList(params);
		state.tableData = results.records.map((obj: any) => ({  
			...obj,  
			isShowSkuMsg:false,
		}));
		state.loading = false;
		state.total = results.total;
		state.onSalesNum = onSalesNum;
		state.onStockNum = onStockNum;
		state.outSellNum = outSellNum;
		state.outRecycleNum = outRecycleNum;
	}
	goodSpuTableRef.value.clearFilter();
}

// 门店类型切换 (如果不是全部则清空选中门店 以及订单选中状态)
const modeChange = () => {
	getGoodsList();
}
// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getGoodsList();
};
// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getGoodsList();
};
// 商品搜索
const search = () => {
	if (state.param.dateTime?.length == 2) {
		state.param.startTime = state.param.dateTime[0]
		state.param.endTime = state.param.dateTime[1]
	}
	state.param.pageNum = 1;
	getGoodsList()
}
// 点击spu其他信息
const expandSpuMsg = (row?: any) => {
	// expand 展开
	if(row.isShowSpuMsg){
		// sku相关信息表展开状态
		row.isShowSpuMsg = false;
		goodSpuTableRef.value.toggleRowExpansion(row);
	}else{ // 未打开
		// msg 展开时关闭sku	
		row.isShowSpuMsg = true;
		if(row.isShowSkuList){
			row.isShowSkuList = false;
		}else{
			goodSpuTableRef.value.toggleRowExpansion(row);
		}
	}
};
// 展开商品sku列表点击sku列表
const expandSkuList = async (row: any) => {
	// 当前expand信息展开状态时 且sku列表展开时直接关闭expand
	if(row.isShowSkuList){
		row.isShowSkuList = false;
		goodSpuTableRef.value.toggleRowExpansion(row);
	}else{
		// sku 展开时关闭msg	
		row.isShowSkuList = true;
		if(row.isShowSpuMsg){
			row.isShowSpuMsg = false;
		}else{
			goodSpuTableRef.value.toggleRowExpansion(row);
		}
	}
};
// 商品上下架状态修改
const changeStatusFun = async(type:string,obj: any) => {
	let params = {};
	if(type=="spu"){
		params = {
			spuId: obj.spuId,
			onSelf: obj.onSelf
		}
	}else if(type=="sku"){
		params = {
			skuId: obj.skuId,
			onSelf: obj.onSelf
		}
	}
	const { method } = await productChangeOnSelf(params);
	if(method == 'success'){
		ElMessage.success('修改成功');
		getGoodsList();
	}
};
// 商品新增或者编辑
const addCommodity = (value: string,id?: number) => {
	router.push({
		path: '/commodity/goodList/add',
		query: { status: value, id: id},
	});
}
// 商品sku或spu删除
const delFun = (type: string,id: number) => {
	ElMessageBox.confirm(`此操作将永久删除该商品，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning', 
	}).then( async() => {
		// state.tableData.loading = true;
		if(type == 'spu'){
			let res = await spuDelete(id);
			ElMessage.success('删除成功');
			getGoodsList()
		}else{
			let res = await skuDelete(id);
			ElMessage.success('删除成功');
			getGoodsList()
		}
		getGoodsList();
	}).catch(() => {});
}
// 展示商品sku相关信息
const expandSkuMsgFun = (row?: any) => {
	if(row.isShowSkuMsg){
		// sku相关信息表展开状态
		row.isShowSkuMsg = false;
		goodSkuTableRef.value.toggleRowExpansion(row);
	}else{ // 未打开
		row.isShowSkuMsg = true;
		goodSkuTableRef.value.toggleRowExpansion(row);
	}
};
onMounted(() => {
    getGoodsList();
    getConfigDataFun();
    getBrandList();
})
</script>
<style lang="scss" scoped>
.inputWidths{
    .el-input,
    .el-select{
        width: 270px;
    }
    .searchandBts{
        .el-input{
            width: 170px;
        }
        :deep(.el-form-item__content){
            width: 270px;
            justify-content: space-between !important;
        }
    }
}
// 隐藏expand 箭头
:deep(.el-table__expand-column){
    visibility: hidden;
}
.textLeft{
	.text{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-break: break-all;
	}
}
:deep(.el-table .textLeft .cell.el-tooltip ){
	justify-content: flex-start !important;
}
// :deep(.el-table th.textLeft .cell ){
// 	justify-content: flex-start !important;
// 	padding: 0 !important;
// }
.dialogBoxTables{
   height: calc(90vh - 111px - 116px - 49px - 40px) !important;
    :deep(.el-scrollbar){
        --el-scrollbar-bg-color: var(--el-color-primary) !important;
    }
}
:deep(.el-overlay .el-overlay-dialog .el-dialog .el-dialog__body){
    padding: 20px 20px 0 20px !important;
}
:deep(.el-overlay .el-overlay-dialog .el-dialog .is-fullscreen .el-dialog__body){
    padding: 20px 20px 0 20px !important;
}
:deep(.is-fullscreen .el-dialog__body){
    max-height: calc(100vh - 51px - 64px) !important;
    height: calc(100vh - 51px - 64px) !important;
    padding: 20px 20px 0 20px !important;
}
:deep(.is-fullscreen){
    .dialogBoxTables{
        height: calc(100vh - 51px - 116px - 49px - 20px - 64px) !important;
    }
}
</style>